<template>
  <!-- 用于实现频道管理 -->
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell
        title="我的频道"
        :border="false"
      >
        <van-button
          class="editBtn"
          size="mini"
          @click="isEditing=!isEditing"
        >{{isEditing?'取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <!-- 如果当前的下标与传入的curIndex医院，就补充一个类:red -->
        <!-- :class="{类名：bool值}" -->
        <van-grid-item
          @click="hClickMyChannel(idx)"
          :class="{red:idx === curIndex}"
          v-for="(channel, idx) in channels"
          :key="channel.id"
        >
          <span>{{channel.name}}</span>
          <!-- X按钮 -->
          <van-icon
            v-show="isEditing && idx !==0"
            name="cross"
            class="btn"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell
        title="可选频道"
        :border="false"
      ></van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel in recommendChannels"
          :key="channel.id"
          @click="hAddChannels(channel)"
        >
          <span>{{channel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { getAllChannels, addChannels, delChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props: ['channels', // 当前我的频道列表
    'curIndex'], // 接收当前选中频道的索引
  data () {
    return {
      allChannels: [], // 获取所有数据列表
      isEditing: false // 是否处于编辑状态
    }
  },
  created () {
    this.loadAllChannels()
  },
  // 计算属性具有响应式、缓存，在原有数据的基础上对数据进行计算进而生成新的数据
  // 计算属性的结果必须return出去
  computed: {
    recommendChannels () {
      return this.allChannels.filter(channel => {
        // console.log('channel', channel)
        // 如果当前频道在channels中没有出现过，则保留
        const idx = this.channels.findIndex(item => item.id === channel.id)
        // filter是数组中的过滤筛选方法，按照条件筛选数据，如果没有筛选到合适的数据，则返回false
        // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
        // 条件判读 也就是说没有可选数据和已选数据没有对应上，等于-1，返回true可修改
        if (idx === -1) {
          return true
        }
      })
    }
  },
  methods: {
    // 用户在可选的频道区域，点击了某一个频道，做添加
    async hAddChannels (channel) {
      console.log(channel)
      // 1、组装接口需要的参数
      // 1.1 将当前点击的频道，添加已选中的频道
      // 1.2 做映射，组装成后端需要的样子
      // 1.3 它不能包含推荐频道
      try {
        const arr = [...this.channels, channel].map((item, idx) => {
          return {
            id: item.id,
            seq: idx
          }
        })
        arr.splice(0, 1)// 删除推荐频道
        // 2、调用接口
        const res = await addChannels(arr)
        console.log('aaa', res)
        // 3、更新视图(计算属性会自动更新)
        this.channels.push(channel)
        this.$toast.success('添加频道成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('添加频道失败')
      }
    },
    // 用户在我的频道区域，点击了某一个频道
    hClickMyChannel (idx) {
      if (this.isEditing) {
        // 做删除
        this.doDeleteChannel(idx)
      } else {
        this.$emit('change-channel', idx)
      }
    },
    async doDeleteChannel (idx) {
      // 1、根据下标找id
      const id = this.channels[idx].id
      console.log('你要删除的频道id是', id)
      // 2、发请求
      try {
        const res = await delChannel(id)
        console.log(res)
        this.$toast.success('删除频道成功')
        // 如果你删除的频道在当前的频道之前，则要去更新一下父组件中的active
        if (idx < this.curIndex) {
          this.$emit('fixed-active-index')
        }
        // 3、更新视图
        // 从我的频道中，把当前项删除
        this.channels.splice(idx, 1)
      } catch (err) {
        console.log(err)
        this.$toast.fail('删除频道失败')
      }
    },
    async loadAllChannels () {
      try {
        const res = await getAllChannels()
        console.log('所有的频道', res)
        this.allChannels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
.red {
  color: red;
  font-weight: bold;
}
.editBtn {
  color: rgb(229, 97, 91) !important;
  margin-right: 10px;
  padding: 0 10px;
  border-color: rgb(229, 97, 91);
}
</style>
